<template>
  <div class="content">
    <el-row>
      <el-col id="title" :span="24">
        <h1>PDB Parse</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="24"
        style="
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <!-- 搜索面板 -->
        <span>
          <div class="input-suffix">
            <el-input
              placeholder="搜索ID/NAME的PDB文件"
              v-model="input1"
              style="width: 500px"
              @keyup.enter.native="search_pdb"
            >
              <i
                slot="prefix"
                class="el-input__icon el-icon-search"
                @click="search_pdb"
              ></i>
            </el-input>
          </div>
        </span>
        <!-- <div class="control_file">
          <div>
            <el-dropdown>
              <span
                class="el-dropdown-link"
                style="color: black; font-weight: bolder"
              >
                <i class="el-icon-document el-icon--right"></i>
                display files<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div style="background: #409eff">
            <el-dropdown>
              <span
                class="el-dropdown-link"
                style="color: white; font-weight: bolder"
              >
                <i class="el-icon-download el-icon--right"></i>
                download files<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div> -->
      </el-col>
    </el-row>
    <el-row>
      <!-- 左半区 -->
      <el-col :span="12" id="content1">
        <el-card class="info" id="type" shadow="hover">
          <div>
            <el-button type="primary" class="info_btn">Molecule Type</el-button>
            <span id="type_span">{{ mole_type }}</span>
          </div>
        </el-card>
        <el-card class="info" id="seq" shadow="hover">
          <el-scrollbar width="100%" style="height: 150px">
            <div class="sequence">
              <el-button type="primary" class="info_btn" style="dispaly: inline"
                >Sequence</el-button
              >
              <p id="sequ_p">
                {{ sequence }}
              </p>
            </div>
          </el-scrollbar>
        </el-card>
        <!-- atom坐标信息卡片 -->
        <el-card class="zb info" shadow="hover">
          <div class="head">
            <h2 class="in_title">ATOM</h2>
            <el-dropdown>
              <span class="el-dropdown-link"
                >More
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>Download</el-dropdown-item>
                <el-dropdown-item>Total Data</el-dropdown-item>
                <el-dropdown-item>series</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-table
            class="demo_table"
            :data="atomData"
            height="65%"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="category" label="类型" width="180">
            </el-table-column>
            <el-table-column prop="num" label="原子序号" width="180">
            </el-table-column>
            <el-table-column prop="atom_name" label="原子名称" width="180">
            </el-table-column>
            <el-table-column prop="residues" label="残基名称" width="180">
            </el-table-column>
            <el-table-column
              prop="chain_identifier"
              label="链标识符"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="residues_num" label="残疾序列号" width="180">
            </el-table-column>
            <el-table-column prop="atom_lcation" label="原子坐标" width="180">
            </el-table-column>
            <el-table-column prop="temperature" label="温度因子" width="180">
            </el-table-column>
            <el-table-column prop="element_symbol" label="元素符号" width="180">
            </el-table-column>
          </el-table>
          <el-button
            icon="el-icon-bottom"
            size="mini"
            font-size="10px"
            @click="
              dialogTableVisible = true;
              dialogData = atomData;
              dialogType = 1;
            "
            >Show all num</el-button
          >
        </el-card>
        <!-- hetatm坐标信息卡片 -->
        <el-card class="zb info" shadow="hover">
          <div class="head">
            <h2 class="in_title">HETATM</h2>
            <el-dropdown>
              <span class="el-dropdown-link"
                >More
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>Download</el-dropdown-item>
                <el-dropdown-item>Total Data</el-dropdown-item>
                <el-dropdown-item>series</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-table
            class="demo_table"
            :data="hetatmData"
            height="65%"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="category" label="类型" width="180">
            </el-table-column>
            <el-table-column prop="num" label="原子序号" width="180">
            </el-table-column>
            <el-table-column prop="atom_name" label="原子名称" width="180">
            </el-table-column>
            <el-table-column prop="residues" label="残基名称" width="180">
            </el-table-column>
            <el-table-column
              prop="chain_identifier"
              label="链标识符"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="residues_num" label="残疾序列号" width="180">
            </el-table-column>
            <el-table-column prop="atom_lcation" label="原子坐标" width="180">
            </el-table-column>
            <el-table-column prop="temperature" label="温度因子" width="180">
            </el-table-column>
            <el-table-column prop="element_symbol" label="元素符号" width="180">
            </el-table-column>
          </el-table>
          <el-button
            icon="el-icon-bottom"
            size="mini"
            font-size="10px"
            @click="
              dialogTableVisible = true;
              dialogData = hetatmData;
              dialogType = 2;
            "
            >Show all num</el-button
          >
        </el-card>
      </el-col>
      <!-- 右半区 -->
      <el-col :span="12" id="content2">
        <div id="select_file">
          <!-- 文件选择卡片 -->
          <el-card id="r1" shadow="hover">
            <div id="upload">
              <div class="head_r1">
                <h2 class="in_title" id="r1_title">
                  select file <i class="el-icon-folder"></i>
                </h2>
              </div>
              <div>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="aaa"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-change="handleChange"
                  :file-list="fileList"
                  :auto-upload="false"
                  :on-success="success"
                  :multiple="false"
                  :http-request="httpRequest"
                >
                  <el-button slot="trigger" size="small" type="primary"
                    >选取文件</el-button
                  >
                  <el-button
                    style="margin-left: 10px"
                    size="small"
                    type="success"
                    @click="submitUpload"
                    >上传到服务器</el-button
                  >
                  <div slot="tip" class="el-upload__tip">上传需要的PDB文件</div>
                  <div>
                    <el-alert
                      :title="tips_title"
                      v-show="fileStatusVisible"
                      :type="tips_type"
                      show-icon
                    >
                    </el-alert>
                  </div>
                </el-upload>
              </div>
            </div>
          </el-card>
          <!-- PDB图片展示区 -->
          <el-card id="r2" shadow="hover">
            <div class="head_r2">
              <i class="el-icon-caret-left i_change" style=""></i>
              <h2 class="in_title" id="r2_title">Biological Assembly</h2>
              <i class="el-icon-caret-right i_change"></i>
            </div>

            <div
              style="height: 400px; width: 400px; position: relative"
              class="viewer_3Dmoljs"
              data-pdb="2POR"
              data-backgroundcolor="0xffffff"
              data-style="stick"
            ></div>
            <div id="r2_footer" style="line-height: 0px">
              <p
                style="
                  width: auto;
                  height: auto;
                  display: inline-block !important;
                  font-weight: bolder;
                  margin-right: 20px;
                  margin-left: 20px;
                "
              >
                <i class="el-icon-box"></i>3D View:
              </p>
              <el-button size="mini" type="primary">Structure</el-button>
              <el-button size="mini" type="primary">Electron</el-button>
              <el-button size="mini" type="primary">Density</el-button>
              <el-button size="mini" type="primary"
                >Ligand Interaction</el-button
              >
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <!-- 下载会话框 -->
    <el-dialog
      title="信息展示和下载界面"
      class="show_data"
      :visible.sync="dialogTableVisible"
      center
      top="10vh"
      width="1000px"
    >
      <div>
        <p style="display: inline-block">请选择您要下载的序列:</p>
        <el-checkbox-group v-model="checkList" style="width: 100%">
          <el-checkbox label="原子序号"></el-checkbox>
          <el-checkbox label="原子名称"></el-checkbox>
          <el-checkbox label="残基名称"></el-checkbox>
          <el-checkbox label="链标识符"></el-checkbox>
          <el-checkbox label="残疾序列号"></el-checkbox>
          <el-checkbox label="原子坐标"></el-checkbox>
          <el-checkbox label="占有率"></el-checkbox>
          <el-checkbox label="温度因子"></el-checkbox>
          <el-checkbox label="元素符号"></el-checkbox>
        </el-checkbox-group>
      </div>
      <el-table
        class="detail_table"
        :data="dialogData"
        height="500px"
        width="600px"
      >
        <el-table-column prop="category" label="原子类型"> </el-table-column>
        <el-table-column prop="num" label="原子序号"> </el-table-column>
        <el-table-column prop="atom_name" label="原子名称"> </el-table-column>
        <el-table-column prop="residues" label="残基名称"> </el-table-column>
        <el-table-column prop="chain_identifier" label="链标识符">
        </el-table-column>
        <el-table-column prop="residues_num" label="残基序列号" width="110">
        </el-table-column>
        <el-table-column
          prop="atom_lcation"
          label="原子坐标(x,y,z)"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="occupation_rate" label="占有率">
        </el-table-column>
        <el-table-column prop="temperature" label="温度因子" width="">
        </el-table-column>
        <el-table-column prop="element_symbol" label="元素符号">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogTableVisible = false"
          style="margin-right: 50px"
          >取 消</el-button
        >
        <el-button type="primary" @click="download">下 载</el-button>
      </span>
    </el-dialog>
  </div>
  <!--
  <div>
  </div> -->
</template>
<script>
export default {
  data() {
    return {
      mole_type: "",
      sequence: "",
      tips_title: "",
      tips_type: "",
      tips2_title: "",
      tips2_type: "",
      fileStatusVisible: false, // 上传文件是否成功显示
      checkList: [],
      input1: "",
      dialogType: 1, // dialog 1显示atom 2显示hetatm
      dialogData: [],
      atomData: [], // 原子信息表
      hetatmData: [], // 小分子信息表
      fileList: [],
      dialogTableVisible: false,
      dialogTableVisible2: false,
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      // // console.log('handlePreview');
    },
    handlePreview(file) {
      // // console.log('handlePreview');
    },
    // 上传成功时弹框
    success(response, file, fileList) {
      // // console.log('success')
      // // console.log(file)
      // // console.log(fileList)
    },
    // 上传文件让第二次覆盖第一的文件
    handleChange(file, fileList) {
      // // console.log('========')
      // // console.log(file)
      // // console.log(fileList)
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]
      }
    },
    // 上传文件函数取得数据
    httpRequest(item) {
      var that = this
      // // console.log("httpRequest");
      const fd = new FormData()
      fd.append('file', item.file)
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      };
      this.$axios.post(this.$globalMsg.djangoHost + '/upload', fd, config).then((response) => {
        // console.log(response.data)
        that.fileStatusVisible = true
        that.tips_type = 'success'
        that.tips_title = '上传成功'
        that.atomData = response.data.atom
        that.hetatmData = response.data.hetatm
        that.sequence = response.data.sequence
        that.mole_type = response.data.mole_type
      }, function (err) {
        that.fileStatusVisible = true
        that.tips_type = 'error'
        that.tips_title = '上传失败'
        return err
        // // console.log(err)
      }
      )
    },
    download() {
      if (this.dialogType === 1) {
        this.getatom()
      } else {
        this.gethetatm()
      }
    },
    getatom() {
      var that = this
      // console.log(that.checkList)
      this.$axios.get(this.$globalMsg.djangoHost + '/getatom', { params: { list: that.checkList } }).then((response) => {
        // console.log(response.data.destination)
        window.open(this.$globalMsg.djangoHost + response.data.destination)
        alert('下载成功')
        // // console.log(response.data)
      }, function (err) {
        // console.log(that.checkList)
        alert('下载失败')
        return err
        // // console.log(err)
      })
    },
    gethetatm() {
      var that = this
      // console.log(that.checkList)
      this.$axios.get(this.$globalMsg.djangoHost + '/gethetatm', { params: { list: that.checkList } }).then((response) => {
        // console.log(response.data.destination)
        window.open(this.$globalMsg.djangoHost + response.data.destination)
        alert('下载成功')
        // // console.log(response.data)
      }, function (err) {
        // console.log(that.checkList)
        alert('下载失败')
        return err
        // // console.log(err)
      })
    },
    // 搜索PDB并展示的功能
    search_pdb() {
      var that = this
      window.open('https://files.rcsb.org/download/' + that.input1.toUpperCase() + '.pdb')
      // this.$axios.get(this.$globalMsg.djangoHost + '/search_pdb', { params: { pdb_id: that.input1 } }).then((response) => {
      //   // console.log(response.data.destination)
      //   if (response.data.status === 'canfind') {
      //     that.atomData = response.data.atom
      //     that.hetatmData = response.data.hetatm
      //     that.sequence = response.data.sequence
      //     that.mole_type = response.data.mole_type
      //     that.fileStatusVisible = true
      //     that.tips2_type = 'success'
      //     that.tips2_title = '搜索成功'
      //   } else {
      //     that.fileStatusVisible = true
      //     that.tips2_type = 'error'
      //     that.tips2_title = '未搜索到此PDB文件'
      //   }
      //   // // console.log(response.data)
      // }, function (err) {
      //   // console.log(that.checkList)
      //   that.fileStatusVisible = true
      //   that.tips2_type = 'error'
      //   that.tips2_title = '未搜索此PDB文件时出错'
      //   return err
      //   // // console.log(err)
      // })
    }
  }
};
</script>
<style scoped>
@import "~@/assets/scss/mall.scss";
</style>
<style scoped>
</style>
